<template>
  <div class="active-container">
    <el-card class="search-card">
      <el-form :model="formInline" label-width="100px" inline>
        <el-form-item label="活动名称">
          <el-input v-model="formInline.activityName" placeholder="请输入活动名称" clearable />
        </el-form-item>
        <el-form-item label="活动状态">
          <el-select v-model="formInline.state" placeholder="请选择活动状态" clearable>
            <el-option label="报名未开始" value="0" />
            <el-option label="报名进行中" value="1" />
            <el-option label="活动待开始" value="2" />
            <el-option label="活动进行中" value="3" />
            <el-option label="活动已结束" value="4" />
          </el-select>
        </el-form-item>
        <el-form-item label="营销方式">
          <el-select v-model="formInline.discountMode" placeholder="请选择营销方式" clearable>
            <el-option label="满减" value="1" />
            <el-option label="优惠券" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getAll">查询</el-button>
          <el-button @click="clear">重置</el-button>
          <el-button type="primary" @click="addActive">新建活动</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="table-card">
      <el-table :data="tableData" border style="width: 100%" v-loading="loading">
        <el-table-column prop="activityName" label="活动名称" min-width="150" />
        <el-table-column prop="state" label="活动状态" min-width="120">
          <template #default="scope">
            <el-tag v-if="scope.row.state === 0">报名未开始</el-tag>
            <el-tag type="warning" v-else-if="scope.row.state === 1">报名进行中</el-tag>
            <el-tag type="primary" v-else-if="scope.row.state === 2">活动待开始</el-tag>
            <el-tag type="success" v-else-if="scope.row.state === 3">活动进行中</el-tag>
            <el-tag type="info" v-else-if="scope.row.state === 4">活动已结束</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="discountMode" label="营销方式" min-width="100">
          <template #default="scope">
            <span v-if="scope.row.discountMode === 1">满减</span>
            <span v-else-if="scope.row.discountMode === 2">优惠券</span>
          </template>
        </el-table-column>
        <el-table-column prop="sshopNumber" label="商家数" min-width="80" />
        <el-table-column prop="productNumber" label="商品数量" min-width="100" />
        <el-table-column label="操作" min-width="200" fixed="right">
          <template #default="scope">
            <el-button type="primary" link @click="details(scope.row)">详情</el-button>
            <el-button type="primary" link @click="edit(scope.row)">编辑</el-button>
            <el-button type="primary" link @click="del(scope.row)" :disabled="scope.row.state === 4"
              >结束</el-button
            >
            <el-button type="danger" link @click="deleteA(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 活动弹窗 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="60%" destroy-on-close>
      <AddActive ref="addActiveRef" @refresh="getAll" />
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, nextTick } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { useRouter } from 'vue-router'
  import AddActive from './addActive.vue'
  import { activeGetAll, activeDelete, activeEnd } from '@/api/active'

  const router = useRouter()

  // 表单数据
  const formInline = ref({
    activityName: '',
    state: '',
    discountMode: ''
  })

  // 表格数据
  const tableData = ref([])
  const loading = ref(false)
  const currentPage = ref(1)
  const pageSize = ref(10)
  const total = ref(0)

  // 弹窗相关
  const dialogVisible = ref(false)
  const dialogTitle = ref('新增活动')
  const addActiveRef = ref()

  // 获取活动列表
  const getAll = async () => {
    loading.value = true
    try {
      const res = await activeGetAll({
        ...formInline.value,
        page: currentPage.value,
        pageSize: pageSize.value
      })
      if (res.data.code === '000000') {
        tableData.value = res.data.data.list
        total.value = res.data.data.total
      }
    } catch (error) {
      console.error(error)
    } finally {
      loading.value = false
    }
  }

  // 处理分页大小变化
  const handleSizeChange = (val: number) => {
    pageSize.value = val
    getAll()
  }

  // 处理当前页变化
  const handleCurrentChange = (val: number) => {
    currentPage.value = val
    getAll()
  }

  // 新增活动
  const addActive = () => {
    dialogTitle.value = '新增活动'
    dialogVisible.value = true
  }

  // 搜索
  const search = () => {
    currentPage.value = 1
    getAll()
  }

  // 清空搜索条件
  const clear = () => {
    formInline.value = {
      activityName: '',
      state: '',
      discountMode: ''
    }
    currentPage.value = 1
    getAll()
  }

  // 查看详情
  const details = (row: any) => {
    router.push({
      path: '/active/details',
      query: {
        activityId: row.activityId
      }
    })
  }

  // 编辑活动
  const edit = (row: any) => {
    dialogTitle.value = '编辑活动'
    dialogVisible.value = true
    nextTick(() => {
      addActiveRef.value?.setDetails(row)
    })
  }

  // 删除活动
  const deleteA = (row: any) => {
    ElMessageBox.confirm('确定要删除该活动吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      try {
        const res = await activeDelete({ activityId: row.activityId })
        if (res.data.code === '000000') {
          ElMessage.success('删除成功')
          getAll()
        }
      } catch (error) {
        console.error(error)
      }
    })
  }

  // 结束活动
  const del = (row: any) => {
    ElMessageBox.confirm('确定要结束该活动吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      try {
        const res = await activeEnd({ activityId: row.activityId })
        if (res.data.code === '000000') {
          ElMessage.success('操作成功')
          getAll()
        }
      } catch (error) {
        console.error(error)
      }
    })
  }

  onMounted(() => {
    getAll()
  })
</script>

<style scoped lang="scss">
  .active-container {
    padding: 20px;
    .search-card {
      margin-bottom: 20px;
    }
    .table-card {
      .pagination-container {
        margin-top: 20px;
        display: flex;
        justify-content: flex-end;
      }
    }
  }
</style>
